<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/ahome.css">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>管理员首页</title>
</head>
<body>
<div id="app">
    <div class="acontainer">
        <div class="navbar">
            <el-button plain @click="logout">退出登录</el-button>
            <div class="user-info">
                <el-avatar size="large" :src="admin.headPortrait"></el-avatar>
                <span class="username">{{ admin.nickname }}</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div id="pieChart" ref="pieChart" style="width: 600px; height: 600px;">

                </div>
            </div>
            <div class="col">
                <a href="./admin_household.html">
                    <div class="card1 card">
                        <h3>村户管理</h3>
                    </div>
                </a>

                <a href="./admin_questionnaire.html">
                    <div class="card2 card">
                        <h3>统计调查</h3>
                    </div>
                </a>

                <a href="./admin_commodity.html">
                    <div class="card3 card">
                        <h3>交易管理</h3>
                    </div>
                </a>

                <a href="./admin_account.html">
                    <div class="card4 card">
                        <h3>账户设置</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                token: null,
                homeEchartsData: {
                    supplierNumber: 10,
                    buyerNumber: 15,
                    transporterNumber: 5,
                },
                admin: {
                    id: null,
                    username: null,
                    password: null,
                    headPortrait: null,
                    nickname: null,
                },
            }
        },
        mounted() {
            this.recordToken();
        },
        methods: {
            //获取token
            recordToken() {
                this.token = localStorage.getItem('token');
                this.getAdministratorInfo();
                this.drawChart();
            },

            //退出登录
            logout() {
                // 清除本地存储中的 Token
                localStorage.removeItem('token');
                window.location.href = "./admin_login.html";
            },

            //获取管理员全部信息
            getAdministratorInfo() {
                try {
                    axios.get('http://localhost:8080/account/admin', {
                        headers: {
                            'token': this.token
                        },
                    }).then(response => {
                        const responseData = response.data;
                        this.admin = responseData.data;
                        this.$message('欢迎您！' + this.admin.nickname);
                    });
                } catch (error) {
                    console.error('登录失败：', error);
                }

            },

            //绘制echarts图
            drawChart() {
                var myChart = echarts.init(this.$refs.pieChart);
                var option = {
                    title: {
                        text: '智慧村庄项目投放统计',
                        left: 'center',
                        top: 40,
                        textStyle: {
                            color: '#FFFFFF',  // 设置标题文字颜色为白色
                            fontSize: 18
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['平原村', '滨湖村', '沿海村', '三角洲村', '草原村'],
                        textStyle: {
                            color: '#FFFFFF'  // 设置图例文字颜色为白色
                        }
                    },
                    series: [
                        {
                            name: '村庄种类',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            label: {
                                show: false,
                            },
                            data: [
                                {value: 20, name: '平原村'},
                                {value: 30, name: '滨湖村'},
                                {value: 20, name: '沿海村'},
                                {value: 10, name: '三角洲村'},
                                {value: 10, name: '草原村'}
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            },

        }
    })
</script>
</html>